import React  from 'react'
import { Badge, TabBar } from 'antd-mobile'

import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

function App() {
  let nav=useNavigate()
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: '/todo',
      title: '待办',
      icon: <UnorderedListOutline />,
      badge: '5',
    },
    
  ]
  return (
    <div style={{position:'fixed', bottom:'0', left:'0', right:'0'}}>
      <TabBar onChange={(key)=>nav(key)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default App
